<template>
    <div>
        <el-dialog title="添加大纲" :visible.sync="rootVisible">
            <el-form label-width="50px">
                <el-form-item label="名称">
                    <el-input v-model="rootOutlineName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="rootSave()">创建</el-button>
                    <el-button @click="rootVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--编辑节点-->
        <el-dialog title="编辑大纲" :visible.sync="editVisible">
            <el-form label-width="50px">
                <el-form-item label="名称">
                    <el-input v-model="editOutlineName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="editSave()">保存</el-button>
                    <el-button @click="editVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--子添加-->
        <el-dialog title="添加子大纲" :visible.sync="childVisible">
            <el-form label-width="50px">
                <el-form-item label="名称">
                    <el-input v-model="childOutlineName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="childSave()">创建</el-button>
                    <el-button @click="childVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-card v-loading="loading" shadow="never">
            <div slot="header">大纲管理
                <el-button type="primary" size="mini" @click="addRoot()">添加大纲</el-button>
            </div>
            <el-tree :data="outlines" :props="{label:'outline_name'}">
                <div class="node" @mousemove="showOpt=data.id" @mouseout="showOpt=false" slot-scope="{data,node}">
                    <div> 
                    {{data.outline_name}}                        
                    </div>
                    <div  v-show="showOpt==data.id">
                        <el-button type="primary" size="mini" @click.stop="addChild(data.id)">添加子目录</el-button>
                        <el-button type="danger" size="mini" @click.stop="del(data.id)">删除</el-button>
                        <el-button type="primary" size="mini" @click.stop="edit(data)">编辑</el-button>
                        <el-button v-show="node.previousSibling" size="mini" type="primary" icon="el-icon-arrow-up" @click.stop="sortNode(data.id,'up')"></el-button>
                        <el-button v-show="node.nextSibling" size="mini" type="primary" icon="el-icon-arrow-down" @click.stop="sortNode(data.id,'down')"></el-button>
                    </div>
                </div>
            </el-tree>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                showOpt:'',
                loading: false,
                editVisible: false,
                editOutlineName: '',
                editId: '',
                rootOutlineName: '',
                rootVisible: false,
                childVisible: false,
                parendId: '',
                childOutlineName: '',
                outlines: []
            }
        },
        created() {
            this.getOutlines();
        },
        methods: {
            sortNode(id, dir) {
                this.axios.put(`/outlines/sort/${id}/${dir}`).
                then((ret) => {
                    this.getOutlines();
                })
            },
            edit(data) {
                this.editId = data.id;
                this.editOutlineName = data.outline_name;
                this.editVisible = true;
            },
            editSave() {
                this.axios.put(`/outlines/edit/${this.editId}`, {
                    outline_name: this.editOutlineName,
                }).then((ret) => {
                    this.getOutlines();
                    this.editVisible = false;
                })
            },
            addChild(id) {
                this.parendId = id;
                this.childVisible = true;
            },
            childSave() {
                this.axios.post('/outlines/add', {
                    outline_name: this.childOutlineName,
                    parent_id: this.parendId,
                    status: 1
                }).then((ret) => {
                    this.getOutlines();
                    this.childVisible = false;
                })
            },
            del(id) {
                const _this = this;
                this.$confirm('确定删除么??', '删除', '提示!!').then(() => {
                    this.axios.delete(`/outlines/del/${id}`).then(() => {
                        _this.getOutlines();
                    }).catch((error) => {
                        _this.$message.error('请先删除子菜单')
                    })
                }).catch(() => {})
            },
            addRoot() {
                this.rootVisible = true;
            },
            rootSave() {
                this.axios.post('/outlines/add', {
                    outline_name: this.rootOutlineName,
                    parent_id: 0,
                    status: 1
                }).then((ret) => {
                    this.getOutlines();
                    this.rootVisible = false;
                })
            },
            getOutlines() {
                this.loading = true;
                this.axios.get('/outlines').then((ret) => {
                    const {
                        data
                    } = ret.data;
                    this.loading = false;
                    this.outlines = data;
                })
            }
        }
    }
</script>

<style>
    .el-tree-node__content {
        border: 1px solid rgb(202, 199, 199);
        margin: 10px 0;
        padding: 10px 10px;        
    }

    .node {
        padding: 10px 10px;
        display: flex;
        width: 100%;
        justify-content: space-between;
    }
</style>
